<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <script src="./js/flexible.js"></script>
    <link href="./css/mui.css" rel="stylesheet" type="text/css"/>
    <script src="./js/mui.min.js" type="text/javascript"></script>
    <script src="./js/serialLocalStorage.js"></script>
    <script src="./js/temperatureOperate.js"></script>
    <script src="./js/serialWriteRequest.js"></script>
    <script src="./js/serialCommand.js"></script>
    <script src="./js/serialCommon.js"></script>
    <script src="./js/settingOperate.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/common.css"/>
    <link rel="stylesheet" type="text/css" href="./css/shezhi.rem.css"/>
    <link rel="stylesheet" type="text/css" href="./swiper/swiper.min.css">
    <script src="swiper/swiper.min.js"></script>
</head>
<body>
<div class="page flex-col">
    <div class="block_1 flex-col">
        <div class="text-wrapper_1 flex-row">
            <span class="text_1">岩盤浴太空艙</span>
            <span class="text_2" id="text_2">
<!--            2030&nbsp;/&nbsp;08&nbsp;/&nbsp;21&nbsp;07:50-->
          </span>
        </div>
        <div class="group_1 flex-col">
            <div class="box_1 flex-row justify-between">
                <div class="box_2 flex-col">
                    <div class="text-wrapper_2 flex-row justify-between">
                        <span class="text_3">後艙加熱器</span>
                        <span class="text_4">℃</span>
                    </div>
                    <div class="group_2 flex-row justify-between">
                        <span class="text_5" id="current_wendu_houcang">0</span>
                        <img
                                class="image_1"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGb0fc84711937e5163ec00d968c85ddc9.png"
                                id="houcang_open"
                        />
                        <img
                                class="image_1"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGa04944db8b8b8ddf673018491150afe8.png"
                                id="houcang_close"
                                style="display: none"
                        />
                    </div>
                </div>
                <div class="box_3 flex-col">
                    <div class="text-wrapper_3 flex-row justify-between">
                        <span class="text_6">前艙加熱器</span>
                        <span class="text_7">℃</span>
                    </div>
                    <div class="group_3 flex-row justify-between">
                        <span class="text_8" id="current_wendu_qiancang">0</span>
                        <img
                                class="image_2"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGb0fc84711937e5163ec00d968c85ddc9.png"
                                id="qiancang_open"
                        />
                        <img
                                class="image_2"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGa04944db8b8b8ddf673018491150afe8.png"
                                id="qiancang_close"
                                style="display: none"
                        />
                    </div>
                </div>
                <div class="box_4 flex-col">
                    <div class="text-wrapper_4 flex-row justify-between">
                        <span class="text_9">岩盤加熱器</span>
                        <span class="text_10">℃</span>
                    </div>
                    <div class="group_4 flex-row justify-between">
                        <span class="text_11" id="current_wendu_yanpan">0</span>
                        <img
                                class="image_3"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGb0fc84711937e5163ec00d968c85ddc9.png"
                                id="yanpan_open"
                        />
                        <img
                                class="image_3"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGa04944db8b8b8ddf673018491150afe8.png"
                                id="yanpan_close"
                                style="display: none"
                        />
                    </div>
                </div>
                <!-- 加入语言类型标识 data-type  zh-tw 繁体  zh-cn 简体 en-us 英文  ja-jp 日文-->
                <div class="box_5 flex-col" id="language_select">
                    <div class="text-wrapper_5 flex-row ">
                        <span class="text_12">語言</span>
                    </div>
                    <div class="group_5 flex-row justify-between">
                        <div class="text-wrapper_6 flex-col selected">
                            <span class="text_13" data-type="zh-tw">繁中</span>
                        </div>
                        <div class="text-wrapper_7 flex-col">
                            <span class="text_14" data-type="zh-cn">簡中</span>
                        </div>
                    </div>
                    <div class="group_6 flex-row justify-between">
                        <div class="text-wrapper_8 flex-col">
                            <span class="text_15" data-type="en-us">EN</span>
                        </div>
                        <div class="text-wrapper_9 flex-col">
                            <span class="text_16" data-type="ja-jp">日本語</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box_6 flex-row justify-between">
                <div class="grid_1 flex-row">
                    <div class="block_2 flex-col">
                        <div class="text-wrapper_10 flex-row">
                            <span class="text_17">UV殺菌燈</span>
                        </div>
                        <div class="image-wrapper_1 flex-row">
                            <img
                                    class="image_4"
                                    referrerpolicy="no-referrer"
                                    src="./shezhi/MasterDDSSlicePNGb0fc84711937e5163ec00d968c85ddc9.png"
                                    id="uv_open"
                            />
                            <img
                                    class="image_4"
                                    referrerpolicy="no-referrer"
                                    src="./shezhi/MasterDDSSlicePNGa04944db8b8b8ddf673018491150afe8.png"
                                    id="uv_close"
                                    style="display: none"
                            />
                        </div>
                    </div>
                    <div class="block_3 flex-col">
                        <span class="text_18">負離子產生器</span>
                        <img
                                class="image_5"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGb0fc84711937e5163ec00d968c85ddc9.png"
                                id="fulizi_open"
                        />
                        <img
                                class="image_5"
                                referrerpolicy="no-referrer"
                                src="./shezhi/MasterDDSSlicePNGa04944db8b8b8ddf673018491150afe8.png"
                                id="fulizi_close"
                                style="display: none"
                        />
                    </div>
                    <div class="block_4 flex-col">
                        <div class="text-wrapper_11 flex-row">
                            <span class="text_19">溫度單位</span>
                        </div>
                        <div class="block_5 flex-row justify-between">
                            <div class="text-wrapper_12 flex-col">
                                <span class="text_20">℃</span>
                            </div>
                            <div class="text-wrapper_13 flex-col">
                                <span class="text_21">℉</span>
                            </div>
                        </div>
                    </div>
                    <div class="block_6 flex-col">
                        <div class="text-wrapper_14 flex-row justify-between">
                            <span class="text_22">前壓力電阻值</span>
                        </div>
                        <div class="text-wrapper_15 flex-row">
                            <span class="text_24">0</span>
                        </div>
                    </div>
                    <div class="block_7 flex-col">
                        <div class="text-wrapper_16 flex-row justify-between">
                            <span class="text_25">後壓力電阻值</span>
                        </div>
                        <div class="text-wrapper_17 flex-row">
                            <span class="text_27">0</span>
                        </div>
                    </div>
                    <div class="block_8 flex-col">
                        <div class="group_7 flex-row justify-between">
                            <img
                                    class="image_6"
                                    referrerpolicy="no-referrer"
                                    src="./shezhi/MasterDDSSlicePNGd13c846b0ec856e3df39ddb26977c38d.png"
                            />
                            <span class="text_28">有效電能</span>
                            <img
                                    class="image_7"
                                    referrerpolicy="no-referrer"
                                    src="./shezhi/MasterDDSSlicePNG5ec5c46d6519b69710f17079d15bd600.png"
                            />
                        </div>
                        <div class="text-wrapper_18 flex-row justify-between">
                            <span class="text_29">0</span>
                            <span class="text_30">kWh</span>
                        </div>
                    </div>
                </div>
                <div class="box_7 flex-col">
                    <span class="text_31">岩盤定時加熱</span>
                    <div class="section_1 flex-row justify-between">
                        <div class="text-group_1 flex-col justify-between">
                  <span class="paragraph_1">
                    溫度
                    <br/>
                    設定
                  </span>
                            <span class="paragraph_2">
                    開始
                    <br/>
                    時間
                  </span>
                            <span class="paragraph_3">
                    結束
                    <br/>
                    時間
                  </span>
                        </div>
                        <div class="box_8 flex-col justify-between">
                            <div class="group_8 flex-row justify-between">
                                <div class="text-wrapper_19 flex-col">
                                    <span class="text_32">50</span>
                                </div>
                                <span class="text_33">℃</span>
                            </div>
                            <div class="text-wrapper_20 flex-col start-time-btn">
                                <span class="text_34 start-time">15：00</span>
                            </div>
                            <div class="text-wrapper_21 flex-col end-time-btn">
                                <span class="text_35 end-time">15：00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="image-wrapper_2 flex-row">
                <img
                        class="image_8"
                        referrerpolicy="no-referrer"
                        src="./shezhi/MasterDDSSlicePNG852f1d4d5a278babdf518057863a20b1.png"
                        id="to_home"
                />
            </div>
        </div>
    </div>
    <div style="display: none" class="time_setting mask flex-col">
        <div class="box_17_1 flex-col">
            <div class="group_2_1 flex-col">
                <div class="text-wrapper_22_1 flex-row">
                    <span class="text_36_1">開始時間</span>
                </div>
                <div class="text-wrapper_23_1 flex-row justify-between">
                    <span class="text_37_1">時</span>
                    <span class="text_38_1">分</span>
                </div>
                <div class="swiper-container time-shi">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide time-item">
                            0
                        </div>
                        <div class="swiper-slide time-item">
                            1
                        </div>
                        <div class="swiper-slide time-item">
                            3
                        </div>
                        <div class="swiper-slide time-item">
                            4
                        </div>
                        <div class="swiper-slide time-item">
                            5
                        </div>
                        <div class="swiper-slide time-item">
                            6
                        </div>
                        <div class="swiper-slide time-item">
                            7
                        </div>
                        <div class="swiper-slide time-item">
                            8
                        </div>
                        <div class="swiper-slide time-item">
                            9
                        </div>
                        <div class="swiper-slide time-item">
                            10
                        </div>
                        <div class="swiper-slide time-item">
                            11
                        </div>
                        <div class="swiper-slide time-item">
                            12
                        </div>
                    </div>
                </div>
                <div class="swiper-container time-fen">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide time-item">
                            0
                        </div>
                        <div class="swiper-slide time-item">
                            1
                        </div>
                        <div class="swiper-slide time-item">
                            3
                        </div>
                        <div class="swiper-slide time-item">
                            4
                        </div>
                        <div class="swiper-slide time-item">
                            5
                        </div>
                        <div class="swiper-slide time-item">
                            6
                        </div>
                        <div class="swiper-slide time-item">
                            7
                        </div>
                        <div class="swiper-slide time-item">
                            8
                        </div>
                        <div class="swiper-slide time-item">
                            9
                        </div>
                        <div class="swiper-slide time-item">
                            10
                        </div>
                        <div class="swiper-slide time-item">
                            11
                        </div>
                        <div class="swiper-slide time-item">
                            12
                        </div>
                        <div class="swiper-slide time-item">
                            13
                        </div>
                        <div class="swiper-slide time-item">
                            14
                        </div>
                        <div class="swiper-slide time-item">
                            15
                        </div>
                        <div class="swiper-slide time-item">
                            16
                        </div>
                        <div class="swiper-slide time-item">
                            17
                        </div>
                        <div class="swiper-slide time-item">
                            18
                        </div>
                        <div class="swiper-slide time-item">
                            19
                        </div>
                        <div class="swiper-slide time-item">
                            20
                        </div>
                        <div class="swiper-slide time-item">
                            21
                        </div>
                        <div class="swiper-slide time-item">
                            22
                        </div>
                        <div class="swiper-slide time-item">
                            23
                        </div>
                        <div class="swiper-slide time-item">
                            24
                        </div>
                        <div class="swiper-slide time-item">
                            25
                        </div>
                        <div class="swiper-slide time-item">
                            30
                        </div>
                        <div class="swiper-slide time-item">
                            31
                        </div>
                        <div class="swiper-slide time-item">
                            32
                        </div>
                        <div class="swiper-slide time-item">
                            33
                        </div>
                        <div class="swiper-slide time-item">
                            34
                        </div>
                        <div class="swiper-slide time-item">
                            35
                        </div>
                        <div class="swiper-slide time-item">
                            36
                        </div>
                        <div class="swiper-slide time-item">
                            37
                        </div>
                        <div class="swiper-slide time-item">
                            38
                        </div>
                        <div class="swiper-slide time-item">
                            39
                        </div>
                        <div class="swiper-slide time-item">
                            40
                        </div>
                        <div class="swiper-slide time-item">
                            41
                        </div>
                        <div class="swiper-slide time-item">
                            42
                        </div>
                        <div class="swiper-slide time-item">
                            43
                        </div>
                        <div class="swiper-slide time-item">
                            44
                        </div>
                        <div class="swiper-slide time-item">
                            45
                        </div>
                        <div class="swiper-slide time-item">
                            46
                        </div>
                        <div class="swiper-slide time-item">
                            47
                        </div>
                        <div class="swiper-slide time-item">
                            48
                        </div>
                        <div class="swiper-slide time-item">
                            49
                        </div>
                        <div class="swiper-slide time-item">
                            50
                        </div>
                        <div class="swiper-slide time-item">
                            51
                        </div>
                        <div class="swiper-slide time-item">
                            52
                        </div>
                        <div class="swiper-slide time-item">
                            53
                        </div>
                        <div class="swiper-slide time-item">
                            54
                        </div>
                        <div class="swiper-slide time-item">
                            55
                        </div>
                        <div class="swiper-slide time-item">
                            56
                        </div>
                        <div class="swiper-slide time-item">
                            57
                        </div>
                        <div class="swiper-slide time-item">
                            58
                        </div>
                        <div class="swiper-slide time-item">
                            59
                        </div>
                    </div>
                </div>

                <div class="section_6_1 flex-row">
                    <div id="time-set" class="text-wrapper_29_1 flex-col" >
                        <span class="text_49_1">確定</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/shezhi.js"></script>
<script>
    var openFlg = null
    function timeSettingShow(){
        $('.time_setting').show()
        const swiper = new Swiper('.swiper-container', {
            direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            slidesPerView:5
        })
    }
    $('.start-time-btn').click(function (){
        openFlg = 'start'
        timeSettingShow()
    })
    $('.end-time-btn').click(function (){
        openFlg = 'end'
        timeSettingShow()
    })
    $('#time-set').click(function (){
        if(openFlg==='start'){
            $('.start-time').html(
                `${$('.time-shi .swiper-slide-active').next().next().text()}:${$('.time-fen .swiper-slide-active').next().next().text()}`
            )
        }else if(openFlg==='end'){
            $('.end-time').html(
                `${$('.time-shi .swiper-slide-active').next().next().text()}:${$('.time-fen .swiper-slide-active').next().next().text()}`
            )
        }
        $('.time_setting').hide()
    })
</script>
</html>
